var province = "浙江";
var city = "杭州";
var dataCache = {};

function getCity(lastDataHeight) {
    var data = [{
        "city": "普外科"
    },
    {
        "city": "普外科特需"
    },
    {
        "city": "心外科"
    },
    {
        "city": "胸外科"
    },
    {
        "city": "心外科特需"
    },
    {
        "city": "神经外科"
    },
    {
        "city": "肝肿瘤外科"
    }
    ];
    dataCache[province] = data;
    move(dataCache[province], lastDataHeight);
}

function move(data, lastDataHeight) {
    var html = "<ul>";
    data.forEach(function (item) {
        var li = "<li><a href= ''><span >" + item.city + "</span></a></li>";
        html += li;
    });
    html += "</ul>";
    $(".panel0 .city").append(html);
    $(".panel0 .city").animate({ top: -lastDataHeight }, function () {
        $(".panel0 .city").children("ul").eq(0).remove();
        $(".panel0 .city").css({ "top": 0 });
    });
};

// province 
$(".panel0 .province li").click(function (e) {
    e = e || window.event;
    e.stopPropagation();
    var lastDataHeight = $(".panel0 .city ul").eq(0).height();
    province = $(this).html();
    $(this).addClass("active").siblings().removeClass("active");
    if (dataCache[province]) {
        move(dataCache[province], lastDataHeight);
    } else {
        getCity(lastDataHeight);
    }
});


$(".panel0 .city").on("click", "li", function () {
    $(this).addClass("active").siblings().removeClass("active");
    city = $(this).children("span").html();
});
